<template>
<div>
    <!-- <img v-if="imgsrc" :src="imgsrc" class="avatar"> -->
    <el-dialog :title="bulkTitle" :visible="dialogState" @close="colse">
        <el-form ref="dialogData" :model="dialogData" :rules="rules" label-width="150px" class="demo-ruleForm" :validate-on-rule-change="false">
            <el-form-item label="活动标题" prop="event_title">
                <el-input v-model="dialogData.event_title"></el-input>
            </el-form-item>

            <el-form-item v-if="getIsShowInput==='3'" label="补贴内容" prop="subsidy_content">
                <el-input v-model="dialogData.subsidy_content"></el-input>
            </el-form-item>

            <el-form-item label="活动开始时间" required>
                <el-form-item prop="activity_time_start">
                    <el-date-picker @change="getdate1" value-format="yyyy-MM-dd" v-model="dialogData.activity_time_start" type="date" placeholder="选择活动开始日期"></el-date-picker>
                </el-form-item>
            </el-form-item>

            <el-form-item label="活动结束时间" required>
                <el-form-item prop="activity_time_end">
                    <el-date-picker @change="getdate2" value-format="yyyy-MM-dd" v-model="dialogData.activity_time_end" type="date" placeholder="选择活动结束日期"></el-date-picker>
                </el-form-item>
            </el-form-item>

            <el-form-item label="活动楼盘" prop="real_estate_id">
                <el-select v-model="dialogData.real_estate_id" placeholder="请选择楼盘">
                    <el-option v-for="(item,index) in options" :key="index" :label="item.real_estate_name" :value="item.real_estate_id"></el-option>
                    <!-- <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>-->
                </el-select>
            </el-form-item>

            <el-form-item v-if="getIsShowInput==='1'" label="入会费（定价）/元" prop="join_member_fee">
                <el-input v-model.number="dialogData.join_member_fee"></el-input>
            </el-form-item>

            <el-form-item v-if="getIsShowInput==='1'" label="总发行量（库存）" prop="total_circulation">
                <el-input v-model.number="dialogData.total_circulation"></el-input>
            </el-form-item>

            <el-form-item label="起始报名数" prop="number_of_initial_entries">
                <el-input v-model.number="dialogData.number_of_initial_entries"></el-input>
            </el-form-item>

            <!-- <el-form-item v-if="getIsShowInput==='1'" label="活动图片">
            <el-upload
                class="avatar-uploader"
                action = api.gbuyApproveGroupPurchaseDiscount2
                :limit="1"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                name="file"
                :before-upload="beforeAvatarUpload">
                <img v-if="dialogData.activity_img" :src="'http://172.16.10.70:8080/'+ dialogData.activity_img" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>-->
            <!-- <el-form-item  v-if="getIsShowInput==='1'" label="活动图片" required>
            <el-form-item ref='file_Rule' prop='activity_img'>  
                <el-upload
                    ref="upload"
                    action="http://172.16.10.144:8080/gbuy/ApproveGroupPurchaseDiscount2"
                    :on-success='success'
                    :on-error='error'
                    multiple
                    :limit="1"
                    :auto-upload="false"
                    :on-change="getFile"
                    :file-list="fileList"
                    name="file">
                    <img v-if="imageUrl" :src="dialogData.real_estate_id" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
                    <el-button size="small" type="primary" @click="upload">上传服务器</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
        </el-form-item>-->

            <el-form-item v-if="getIsShowInput==='1'" label="优惠详情" prop="offer_details">
                <el-input v-model="dialogData.offer_details"></el-input>
            </el-form-item>

            <el-form-item v-if="getIsShowInput==='1'" label="适用范围" prop="scope_of_application">
                <el-input v-model="dialogData.scope_of_application"></el-input>
            </el-form-item>

            <el-form-item v-if="getIsShowInput==='1'" label="使用方法" prop="how_to_use">
                <el-input v-model="dialogData.how_to_use"></el-input>
            </el-form-item>

            <el-form-item v-if="getIsShowInput==='1'" label="服务承诺" prop="pledge">
                <el-input v-model="dialogData.pledge"></el-input>
            </el-form-item>

            <el-form-item label="推荐理由" prop="recommended_reason">
                <el-input v-model="dialogData.recommended_reason"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('rules')">保存</el-button>
                <el-button @click="resetForm">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<!-- <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> -->
</template>

<script>
import * as api from "../utils/api";
// import { Notification } from 'element-ui';
export default {
    name: "Addbulk",
    // props:['title'],
    data() {
        var validate = function (rule1, value11, callback11) {
            if (Array.isArray(value11)) {
                //格式为：daterange、datetimerange检测
                value.map(function (item) {
                    if (item === "") {
                        return callback11("日期不能为空");
                    }
                });
            } else {
                //格式为：date、datetime、year、month 检测
                if (value11 === null) {
                    console.log(123);
                    return callback11(new Error("日期不能为空"));
                }
            }
            return callback11();
        };
        return {
            ruleForm: {
                date1: "",
                date2: "",
            },
            activity_time_start: "",
            activity_time_end: "",
            imgsrc: "",
            myformdata: {},
            fileList: [],
            options: [],
            // activity_time:[],
            rules: {
                event_title: [{
                        required: true,
                        message: "请输入活动名称",
                        trigger: "change",
                    },
                    {
                        min: 1,
                        max: 30,
                        message: "长度在 1 到 30个字符",
                        trigger: "change",
                    },
                ],
                subsidy_content: [{
                        required: true,
                        message: "请输入补贴内容",
                        trigger: "change",
                    },
                    {
                        min: 1,
                        max: 30,
                        message: "长度在 1 到 30个字符",
                        trigger: "change",
                    },
                ],
                activity_time_start: [{
                        required: true,
                        message: "请选择日期",
                        trigger: "change",
                    },
                    {
                        validator: validate,
                        trigger: "change",
                    },
                ],
                activity_time_end: [{
                        required: true,
                        message: "请选择日期",
                        trigger: "change",
                    },
                    {
                        validator: validate,
                        trigger: "change",
                    },
                ],
                real_estate_id: [{
                    required: true,
                    message: "请选择活动楼盘",
                    trigger: "change",
                }, ],
                join_member_fee: [{
                        required: true,
                        message: "请输入入会费",
                        trigger: "change",
                    },
                    {
                        type: "number",
                        message: "入会费为数字值",
                        trigger: "change",
                    },
                ],
                total_circulation: [{
                        required: true,
                        message: "请输入总发行量",
                        trigger: "change",
                    },
                    {
                        type: "number",
                        message: "总发行量为数字值",
                        trigger: "change",
                    },
                ],
                number_of_initial_entries: [{
                    required: true,
                    type: "number",
                    message: "总发行量为数字值",
                    trigger: "change",
                }, ],
                activity_img: [{
                    required: true,
                    message: "请上传活动图片",
                    trigger: "change",
                }, ],
                offer_details: [{
                    required: true,
                    message: "请输入优惠详情",
                    trigger: "change",
                }, ],
                scope_of_application: [{
                    required: true,
                    message: "请输入适用范围",
                    trigger: "change",
                }, ],
            },
        };
    },
    computed: {
        dialogState() {
            return this.$store.state.PreferentialData.dialogTableVisible;
        },
        dialogData() {
            return this.$store.state.PreferentialData.bulkData;
        },
        bulkTitle() {
            return this.$store.state.PreferentialData.bulkTitle;
        },
        getIsShowInput() {
            return this.$store.state.PreferentialData.bulkState;
        },
    },
    methods: {
        getdate1(val) {
            console.log(val);
        },
        getdate2(val) {
            console.log(val);
        },
        error() {
            this.$refs.dialogData.validateField("activity_img");
        },

        handleAvatarSuccess(response) {
            console.log(response);
            this.$store.dispatch("changeImgActions", response.data[0]);
            // this.dialogData.activity_img=response.data[0]
            // this.$refs.file_Rule.clearValidate('activity_img')
            // this.dialogData.file = fileList;
        },
        beforeAvatarUpload() {},
        upload() {
            // console.log(123);
            this.$refs.upload.submit();
        },
        colse() {
            this.$refs.dialogData.resetFields();
            this.$store.dispatch("changeDialogActions1");
        },
        // httpRequest(param) {
        //     const fileObj = param.file // 相当于input里取得的files
        //     this.myformdata.append('file', fileObj)// 文件对象
        // },
        getFile(file, fileList) {
            const myformdata = new FormData(); // FormData 对象
            this.myformdata = myformdata;
        },
        submitForm() {
            this.$refs.dialogData.validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    // this.$store.dispatch('changeDialogActions1');
                    console.log("验证成功");
                    let bulkState = this.$store.state.PreferentialData.bulkState;
                    let bulkTitle = this.$store.state.PreferentialData.bulkTitle;
                    console.log(bulkState);
                    console.log(bulkTitle);
                    if (bulkState === "1" && bulkTitle === "编辑团购优惠") {
                        this.axios({
                                url: api.gbuyupdateGroupPurchaseDiscount,
                                method: "post",
                                data: {
                                    group_purchase_discount_id: this.dialogData
                                        .group_purchase_discount_id, //1.团购优惠id
                                    event_title: this.dialogData.event_title, //2.活动标题
                                    activity_time_start: this.dialogData.activity_time_start, //3.活动开始时间
                                    real_estate_id: this.dialogData.real_estate_id, //4.活动楼盘
                                    join_member_fee: this.dialogData.join_member_fee, //5.入会费
                                    number_of_people_registered: this.dialogData
                                        .number_of_people_registered, //6.已报名人数
                                    total_circulation: this.dialogData.total_circulation, //7.总发行量
                                    number_of_initial_entries: this.dialogData
                                        .number_of_initial_entries, //8.起始报名数
                                    activity_img: this.dialogData.activity_img, //9.图片
                                    offer_details: this.dialogData.offer_details, //10.优惠详情
                                    scope_of_application: this.dialogData.scope_of_application, //11.适用范围
                                    validity_period: this.dialogData.validity_period, //12.有效期限
                                    how_to_use: this.dialogData.how_to_use, //13.使用方式
                                    pledge: this.dialogData.pledge, //14.服务承诺
                                    recommended_reason: this.dialogData.recommended_reason, //15.推荐理由
                                    activity_time_end: this.dialogData.activity_time_end, //16.活动结束时间
                                },
                            })
                            .then((data) => {
                                if (data.data.code === 200) {
                                    this.$store.dispatch("changeDialogActions1");
                                    this.open1();
                                }
                            })
                            .catch((err) => {
                                console.log(err);
                            });
                    }
                    if (bulkState === "1" && bulkTitle === "新增团购优惠") {
                        this.axios({
                                url: api.gbuyaddGroupPurchaseDiscount,
                                method: "post",
                                data: {
                                    // group_purchase_discount_id:'',           //1.团购优惠id
                                    event_title: this.dialogData.event_title, //2.活动标题
                                    activity_time_start: this.dialogData.activity_time_start, //3.活动开始时间
                                    real_estate_id: this.dialogData.real_estate_id, //4.活动楼盘
                                    join_member_fee: this.dialogData.join_member_fee, //5.入会费
                                    number_of_people_registered: this.dialogData
                                        .number_of_people_registered, //6.已报名人数
                                    total_circulation: this.dialogData.total_circulation, //7.总发行量
                                    number_of_initial_entries: this.dialogData
                                        .number_of_initial_entries, //8.起始报名数
                                    activity_img: this.dialogData.activity_img, //9.图片
                                    offer_details: this.dialogData.offer_details, //10.优惠详情
                                    scope_of_application: this.dialogData.scope_of_application, //11.适用范围
                                    validity_period: this.dialogData.validity_period, //12.有效期限
                                    how_to_use: this.dialogData.how_to_use, //13.使用方式
                                    pledge: this.dialogData.pledge, //14.服务承诺
                                    recommended_reason: this.dialogData.recommended_reason, //15.推荐理由
                                    activity_time_end: this.dialogData.activity_time_end,
                                },
                            })
                            .then((data) => {
                                console.log(data);
                                if (data.data.code === 200) {
                                    this.$store.dispatch("changeDialogActions1");
                                    this.open1();
                                }
                            })
                            .catch((err) => {
                                console.log(err);
                            });
                    }
                    if (bulkState === "2" && bulkTitle === "新增限时抢购") {
                        console.log(123);
                        this.axios({
                                url: api.ltbaddLimitedTimeBuying,
                                method: "post",
                                data: {
                                    // group_purchase_discount_id:'',           //1.团购优惠id
                                    limited_time_buying_id: "",
                                    event_title: this.dialogData.event_title, //2.活动标题
                                    activity_time_start: this.dialogData.activity_time_start, //3.活动开始时间
                                    real_estate_id: this.dialogData.real_estate_id, //4.活动楼盘
                                    // join_member_fee:this.dialogData.join_member_fee,                      //5.入会费
                                    // number_of_people_registered:this.dialogData.number_of_people_registered,          //6.已报名人数
                                    // total_circulation:this.dialogData.total_circulation,                    //7.总发行量
                                    number_of_initial_entries: this.dialogData
                                        .number_of_initial_entries, //8.起始报名数
                                    // activity_img:this.dialogData.activity_img,                                                              //9.图片
                                    // offer_details:this.dialogData.offer_details,                        //10.优惠详情
                                    // scope_of_application:this.dialogData.scope_of_application,                 //11.适用范围
                                    // validity_period:this.dialogData.validity_period,                      //12.有效期限
                                    // how_to_use:this.dialogData.how_to_use,                           //13.使用方式
                                    // pledge:this.dialogData.pledge,                               //14.服务承诺
                                    recommended_reason: this.dialogData.recommended_reason, //15.推荐理由
                                    activity_time_end: this.dialogData.activity_time_end, //16.活动结束时间
                                },
                            })
                            .then((data) => {
                                console.log(data);
                                if (data.data.code === 200) {
                                    this.$store.dispatch("changeDialogActions1");
                                    this.open1();
                                }
                            })
                            .catch((err) => {
                                console.log(err);
                            });
                    }
                    if (bulkState === "2" && bulkTitle === "编辑限时抢购") {
                        console.log(123);
                        this.axios({
                                url: api.ltbupdateLimitedTimeBuying,
                                method: "post",
                                data: {
                                    limited_time_buying_id: this.dialogData.limited_time_buying_id, //1.团购优惠id
                                    event_title: this.dialogData.event_title, //2.活动标题
                                    activity_time_start: this.dialogData.activity_time_start, //3.活动开始时间
                                    real_estate_id: this.dialogData.real_estate_id, //4.活动楼盘
                                    // join_member_fee:this.dialogData.join_member_fee,                      //5.入会费
                                    // number_of_people_registered:this.dialogData.number_of_people_registered,          //6.已报名人数
                                    // total_circulation:this.dialogData.total_circulation,                    //7.总发行量
                                    number_of_initial_entries: this.dialogData
                                        .number_of_initial_entries, //8.起始报名数
                                    // activity_img:this.dialogData.activity_img,                                                              //9.图片
                                    // offer_details:this.dialogData.offer_details,                        //10.优惠详情
                                    // scope_of_application:this.dialogData.scope_of_application,                 //11.适用范围
                                    // validity_period:this.dialogData.validity_period,                      //12.有效期限
                                    // how_to_use:this.dialogData.how_to_use,                           //13.使用方式
                                    // pledge:this.dialogData.pledge,                               //14.服务承诺
                                    recommended_reason: this.dialogData.recommended_reason, //15.推荐理由
                                    activity_time_end: this.dialogData.activity_time_end, //16.活动结束时间
                                },
                            })
                            .then((data) => {
                                console.log(data);
                                if (data.data.code === 200) {
                                    this.$store.dispatch("changeDialogActions1");
                                    this.open1();
                                }
                            })
                            .catch((err) => {
                                console.log(err);
                            });
                    }
                    if (bulkState === "3" && bulkTitle === "新增购房补贴") {
                        this.axios({
                                url: api.hpsaddHousePurchaseSubsidy,
                                method: "post",
                                data: {
                                    panic_buying_id: "",
                                    // limited_time_buying_id:this.dialogData.limited_time_buying_id,           //1.团购优惠id
                                    event_title: this.dialogData.event_title, //2.活动标题
                                    activity_time_start: this.dialogData.activity_time_start, //3.活动开始时间
                                    real_estate_id: this.dialogData.real_estate_id, //4.活动楼盘
                                    // join_member_fee:this.dialogData.join_member_fee,                      //5.入会费
                                    // number_of_people_registered:this.dialogData.number_of_people_registered,          //6.已报名人数
                                    // total_circulation:this.dialogData.total_circulation,                    //7.总发行量
                                    number_of_initial_entries: this.dialogData
                                        .number_of_initial_entries, //8.起始报名数
                                    // activity_img:this.dialogData.activity_img,                                                              //9.图片
                                    // offer_details:this.dialogData.offer_details,                        //10.优惠详情
                                    // scope_of_application:this.dialogData.scope_of_application,                 //11.适用范围
                                    // validity_period:this.dialogData.validity_period,                      //12.有效期限
                                    // how_to_use:this.dialogData.how_to_use,                           //13.使用方式
                                    // pledge:this.dialogData.pledge,                               //14.服务承诺
                                    recommended_reason: this.dialogData.recommended_reason, //15.推荐理由
                                    activity_time_end: this.dialogData.activity_time_end, //16.活动结束时间
                                },
                            })
                            .then((data) => {
                                if (data.data.code === 200) {
                                    this.$store.dispatch("changeDialogActions1");
                                    this.open1();
                                }
                            })
                            .catch((err) => {
                                console.log(err);
                            });
                    }
                    if (bulkState === "3" && bulkTitle === "编辑购房补贴") {
                        this.axios({
                                url: api.hpsupdateHousePurchaseSubsidy,
                                method: "post",
                                data: {
                                    panic_buying_id: "",
                                    // limited_time_buying_id:this.dialogData.limited_time_buying_id,           //1.团购优惠id
                                    event_title: this.dialogData.event_title, //2.活动标题
                                    activity_time_start: this.dialogData.activity_time_start, //3.活动开始时间
                                    real_estate_id: this.dialogData.real_estate_id, //4.活动楼盘
                                    // join_member_fee:this.dialogData.join_member_fee,                      //5.入会费
                                    // number_of_people_registered:this.dialogData.number_of_people_registered,          //6.已报名人数
                                    // total_circulation:this.dialogData.total_circulation,                    //7.总发行量
                                    number_of_initial_entries: this.dialogData
                                        .number_of_initial_entries, //8.起始报名数
                                    // activity_img:this.dialogData.activity_img,                                                              //9.图片
                                    // offer_details:this.dialogData.offer_details,                        //10.优惠详情
                                    // scope_of_application:this.dialogData.scope_of_application,                 //11.适用范围
                                    // validity_period:this.dialogData.validity_period,                      //12.有效期限
                                    // how_to_use:this.dialogData.how_to_use,                           //13.使用方式
                                    // pledge:this.dialogData.pledge,                               //14.服务承诺
                                    recommended_reason: this.dialogData.recommended_reason, //15.推荐理由
                                    activity_time_end: this.dialogData.activity_time_end, //16.活动结束时间
                                },
                            })
                            .then((data) => {
                                if (data.data.code === 200) {
                                    this.$store.dispatch("changeDialogActions1");
                                    this.open1();
                                }
                            })
                            .catch((err) => {
                                console.log(err);
                            });
                    }
                } else {
                    this.openprompt();
                    return false;
                }
            });
        },
        openprompt() {
            this.$alert("请正确输入提交的内容", "提示", {
                confirmButtonText: "确定",
                // callback: action => {
                //     this.$message({
                //     type: 'info',
                //     message: `action: ${ action }`
                //     });
                // }
            });
        },
        open1() {
            this.$notify({
                title: "成功",
                message: "添加优惠券成功",
                type: "success",
            });
        },
        resetForm() {
            // this.$refs[this.dialogData].resetFields();
            this.colse();
        },
    },

    created() {
        this.axios({
            method: "get",
            url: api.gbuyApproveGroupPurchaseDiscount1,
        }).then((data) => {
            console.log(data);
            this.options = data.data.data;
        });
    },
};
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
